<template>
	<view>
		<view class="head">
			<image src="../../static/images/arrow_left.png" mode="" @click="goClipage"></image>
			<view class="">{{ moy }}</view>
			<view class="f32" @click="gopayto">{{mad}}</view>
		</view>
		<view class="use">
			<view class="use-l">客户：{{ name }}</view>
			<view class="use-r red">总欠款：{{ receivable }}</view>
		</view>
		<view class="heads">
			<view class="box-l">
				<image src="../../static/slice/01.png" mode=""></image>
				现金
			</view>
			<view class="box-r"><input type="text" v-model="Cash" placeholder="¥0.00" /></view>
		</view>
		<view class="heads">
			<view class="box-l">
				<image src="../../static/slice/02.png" mode=""></image>
				支付宝
			</view>
			<view class="box-r"><input type="text" v-model="Alipay" placeholder="¥0.00" /></view>
		</view>
		<view class="heads">
			<view class="box-l">
				<image src="../../static/slice/03.png" mode=""></image>
				微信
			</view>
			<view class="box-r"><input type="number" v-model="Wx" placeholder="¥0.00" /></view>
		</view>
		<view class="heads">
			<view class="box-l">
				<image src="../../static/slice/04.png" mode=""></image>
				银行卡
			</view>
			<view class="box-r"><input type="text" v-model="Card" placeholder="¥0.00" /></view>
		</view>
		<view class="heads">
			<view class="box-l">
				<image src="../../static/slice/05.png" mode=""></image>
				其他
			</view>
			<view class="box-r"><input type="text" v-model="Else" placeholder="¥0.00" /></view>
		</view>
		<button type="primary" @click="giveMoney">确认退款¥{{ msg }}</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			Cash: '',
			Alipay: '',
			Wx: '',
			Card: '',
			Else: '',
			receivable: '',
			arr: {},
			name: '',
			magg: '',
			id: '',
			moy: '向客户退款',
			pay_data: {},
			mm: 2,
			mad:'去收款'
		};
	},
	onLoad(e) {
		this.arr = uni.getStorageSync('User')
		
		this.receivable = this.arr.receivable;
		this.name = this.arr.name;
		this.id = this.arr.customer_id;
	},
	methods: {
		giveMoney() {
			this.pay_data.cash = +this.Cash;
			this.pay_data.alipay = +this.Alipay;
			this.pay_data.wechat = +this.Wx;
			this.pay_data.bank_card = +this.Card;
			this.pay_data.other = +this.Else;
			console.log(this.pay_data);
			this.$ajax('api/v1.pay/add', {
				customer_id: this.id,
				pay_data: JSON.stringify(this.pay_data),
				payment_type: this.mm
			})
				.then(res => {
					// console.log(res);
					uni.navigateTo({
						url:'clientPage'
					})
				})
				.catch(res => {
					console.log(Error);
				});
		},
		goClipage() {
			uni.switchTab({
				url: '../shop/exhibit'
			});
		},
		gopayto() {
			uni.navigateTo({
				url:'payment'
			})
		}
	},
	computed: {
		msg() {
			return +this.Cash + +this.Alipay + +this.Wx + +this.Card + +this.Else;
		}
	}
};
</script>

<style lang="less">
page {
	background-color: #f7f4f8;
}
.head {
	
	line-height: 88rpx;
	background-color: #249af6;
	color: #ffffff;
	display: flex;
	justify-content: space-between;
	padding:50upx 30upx 0 30rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	image {
		width: 22rpx;
		height: 39rpx;
		margin-top: 25rpx;
	}
}
.use {
	height: 110rpx;
	line-height: 110rpx;
	background-color: #ffffff;
	display: flex;
	margin-top: 30rpx;
	padding: 0 30rpx;
	justify-content: space-between;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	margin-bottom: 20rpx;
	.red {
		color: #f64444;
	}
}
.heads {
	height: 110upx;
	line-height: 110rpx;
	background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	padding:0 30upx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	position: relative;
	border-bottom: 3rpx solid #eeeeee;
	image {
		width: 18rpx;
		height: 33rpx;
		vertical-align: middle;
		margin-left: 20rpx;
	}
	.box-l {
		display: flex;
		line-height: 110rpx;
		image {
			width: 53rpx;
			height: 53rpx;
			margin-top: 35rpx;
			margin-right: 22rpx;
		}
	}
	.box-r {
		.box-l {
			position: absolute;
			left: 0;

			image {
				width: 53rpx;
				height: 53rpx;
			}
		}
		input {
			width: 100%;
			text-align: right;
			height: 100%;
			overflow: hidden;
			padding-left: 100rpx;
			box-sizing: border-box;
		}
		.bx {
			position: absolute;
			right: 100rpx;
		}
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}
}
button {
	width: calc(100%-60rpx);
	margin-top: 98rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
}
</style>
